<template>
  <el-select
    v-model="selectValue"
    :multiple="multiple"
    :placeholder="placeholder"
    :clearable="clearable"
    :filterable="filterable"
    :size="size"
    :style="styleValue"
    @change="selectChangeHandle"
  >
    <el-option
      v-for="dict in dictOptions"
      :key="dict.dictValue"
      :label="dict.dictLabel + (labelWithKey ? '(' + dict.dictValue + ')' : '')"
      :value="dict.dictValue"
    />
  </el-select>
</template>

<script>
export default {
  name: 'DictSelector',
  props: {
    // 下拉列表
    dictData: {
      type: Array,
      default: undefined
    },
    // 字典类型
    dictType: {
      type: String,
      default: undefined
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: true
    },
    filterable: {
      type: Boolean,
      default: true
    },
    defaultSelectIndex: {
      type: Number,
      default: -1
    },
    size: {
      type: String,
      default: 'medium'
    },
    styleValue: {
      type: [Object, String],
      default: 'width:100%;'
    },
    labelWithKey: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 下拉列表
      dictOptions: this.dictData,
      // 选中的下拉框值
      selectValue: (this.value && this.value + '') || '',
      // 选择的下拉框对象
      selectOption: undefined
    }
  },
  watch: {
    value(newVal, oldVal) {
      this.selectValue = (newVal && newVal + '') || ''
    },
    selectValue(newVal, oldVal) {
      this.$emit('input', newVal)
    },
    dictData(newVal, oldVal) {
      this.dictOptions = newVal
    }
  },
  created() {
    this.doGetDictValues()
  },
  methods: {
    doGetDictValues: function () {
      // 没有指定数据源则从服务器获取
      if (this.dictData === undefined) {
        this.getDicts(this.dictType).then((response) => {
          this.dictOptions = response.data
          this.doSetDefaultSelect()
        })
      } else {
        this.doSetDefaultSelect()
      }
    },
    // 设置默认值
    doSetDefaultSelect: function () {
      if (
        this.defaultSelectIndex != null &&
        this.defaultSelectIndex >= 0 &&
        this.defaultSelectIndex < this.dictOptions.length
      ) {
        this.selectOption = this.dictOptions[this.defaultSelectIndex]
        this.selectValue = this.selectOption.dictValue
      } else {
        this.dictOptions.forEach((value, index, arr) => {
          if ('Y' === value.isDefault) {
            this.selectOption = value
            this.selectValue = value.dictValue
          }
        })
      }
    },
    // 下拉框选择改变
    selectChangeHandle: function (value) {
      this.dictOptions.forEach((option, index, arr) => {
        // 兼容数字类型的value
        if (value + '' === option.dictValue) {
          this.selectOption = option
        }
      })
      this.$emit('change', value, this.selectOption)
    }
  }
}
</script>

<style lang="scss" scoped></style>
